<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header">
        <div
          class="logo-container"
          @click="index"
        >
          <img
            src="../../assets/dslogo.png"
            class="logo"
            alt="logo"
          />
        </div>
        <!--功能板块菜单-->
        <div class="header-function">
          <!-- <el-row :gutter="20" >
                        <el-col :span="6" style="display:flex;flex-direction: row;">
                            <button class="grid-content ep-bg-purple" @click="index">官网首页</button>
                            <button class="grid-content ep-bg-purple" @click="productview">商品预览</button>
                            <button class="grid-content ep-bg-purple" @click="company">了解公司</button>
                            <button class="grid-content ep-bg-purple" @click="service">服务支持</button>
                            <button class="grid-content ep-bg-purple" @click="cooperate">相关合作</button>
                        </el-col>
                    </el-row> -->
          <el-menu
            mode="horizontal"
            background-color="#1E90FF"
            text-color="#fff"
            active-text-color="#ffd04b"
            :default-active="$route.path"
            router
          >
            <el-menu-item index="/dscompany/index">官网首页</el-menu-item>
            <el-menu-item index="/dscompany/productview">产品预览</el-menu-item>
            <el-menu-item index="/dscompany/about_company">了解社团</el-menu-item>
            <el-menu-item index="/dscompany/sale_service">服务支持</el-menu-item>
            <el-menu-item index="/dscompany/cooperate">相关合作</el-menu-item>
          </el-menu>
        </div>
        <div class="avatar-container">
          <img
            src="../../assets/avatar.png"
            class="avatar"
            alt="avatar"
            @click="gotologin"
          />
        </div>
      </el-header>

      <el-container>
        <el-container>
          <el-main class="main">
            <router-view></router-view>
          </el-main>
          <el-footer class="footer">
            <p>重庆市对外经贸学院</p>
            <p>email:652985849@qq.com</p>
            <p>© 2025 科学技术创新协会 </p>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import constmer from "../../components/Constmer.vue";
import Hotevents from "../../components/Hot-events.vue";
import { directive as vIntersect } from "vue-intersection-observer";
import { ElMessage } from "element-plus";
import axios from "axios";
export default {
  components: {
    constmer,
    Hotevents,
  },
  directives: {
    intersect: vIntersect,
  },
  data() {
    return {};
  },
  methods: {
    index() {
      this.$router.push("/dscompany/index");
    },
    async gotologin() {
      try{
        // let userInfo = JSON.parse(localStorage.getItem("userInfo"));
        const response = await axios.get('http://47.108.80.35:6060/user/info')
        console.log(response)
        if(response.data.code === 200){
          ElMessage({
            message: "您已登录",
            type: "warning",
            duration: 2000,
          })
        }else{
          this.$router.push("/login")
        }
      }catch(error){
        this.$router.push("/login")
      }
    },
    productview() {
      this.$router.push("/dscompany/productview");
    },
    company() {
      this.$router.push("/dscompany/about_company");
    },
    service() {
      this.$router.push("/dscompany/sale_service");
    },
    cooperate() {
      this.$router.push("/dscompany/cooperate");
    },
    //视口监视
    onIntersectProductTitle([entry]) {
      if (entry.isIntersecting) {
        this.isProductTitleVisible = true;
      }
    },
    onIntersectProductSwiper([entry]) {
      if (entry.isIntersecting) {
        this.isProductSwiperVisible = true;
      }
      console.log(this.isProductSwiperVisible);
    },
    onIntersectHotEvents([entry]) {
      if (entry.isIntersecting) {
        this.isHotEventsVisible = true;
      }
    },
  },
};
</script>

<style scoped>
.header {
  background-color: #1e90ff;
  color: #fff;
  font-size: 20px;
  height: 10vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
.logo-container {
  display: flex;
  align-items: center;
}
.logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 50%;
}
.avatar-container {
  display: flex;
  align-items: center;
}
.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #fff;
}

.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  display: inline-block;
  margin-right: 20px; /* 调整间距 */
  font-size: 20px;
  color: #fff;
  background-color: #1e90ff;
  white-space: nowrap;
  border: none;
}

.main {
  background-color: #fefbfb;
  color: #000;
  font-size: 20px;
  text-align: center;
  height: 80vh;
  padding: 20px;
  box-sizing: border-box;
}

.header-function {
  flex: 1;
  display: flex;
  justify-content: center;
}

.header-function .el-menu--horizontal {
  border-bottom: none;
}

.header-function .el-menu--horizontal > .el-menu-item {
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  padding: 0 20px;
}

.header-function .el-menu {
  width: 70%;
  display: flex;
  justify-content: space-around;
}

.footer {
  height: 10vh;
  /* background-color: #FFC1C1; */
  background: linear-gradient(180deg, #f5f5f5, #dcdcdc);
  color: #fff;
  font-size: 20px;
  display: flex;
  flex-direction: row; /* 水平排列 */
  justify-content: center; /* 居中对齐 */
  align-items: center; /* 垂直居中 */
  gap: 20px; /* 可选：添加标签之间的间距 */
  text-align: center;
}
p {
  color: #000;
}
</style>